<template>
  <div>
    <h2 style="margin-bottom: 30px">{{ title }}</h2>
    <el-form
      :model="editForm"
      label-width="auto"
    >
      <el-form-item label="任务名称：">
        <el-select
          style="width: 30%"
          v-model="editForm.taskConfigId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in taskOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="责任人：">
        <el-select
          style="width: 30%"
          v-model="editForm.responsibleUserId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in manOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="抄送人：">
        <el-select
          style="width: 30%"
          multiple
          v-model="editForm.carbonCopyUserIds"
          placeholder="请选择"
        >
          <el-option
            v-for="item in manOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务内容：">
        <el-input
          type="textarea"
          style="width: 30%"
          v-model="editForm.content"
          placeholder="请输入内容"
          :autosize="{ minRows: 8, maxRows: 16 }"
        />
      </el-form-item>
      <el-form-item label="任务日期：">
        <el-date-picker
          style="width: 30%"
          v-model="editForm.taskDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker
      ></el-form-item>
      <el-form-item label="开始时间：">
        <el-date-picker
          style="width: 30%"
          v-model="editForm.taskStartTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间：">
        <el-date-picker
          style="width: 30%"
          v-model="editForm.taskEndTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-row style="height: 100px; box-sizing: border-box; margin: 20px 0 0 10%">
      <el-button
        plain
        @click="$router.back(-1)"
        >返回</el-button
      >
      <el-button
        type="primary"
        @click="saveHandler"
        >保存并提交</el-button
      >
    </el-row>
  </div>
</template>

<script>
import { getEnableUserList } from '../../http/commonApi.js'
import {
  getTaskConfigList,
  addTaskInfo,
  editTaskInfo,
} from '../../http/officeTaskMg/officeTaskMg.js'
export default {
  data() {
    return {
      relaySchemaOptions: [],
      title: '新增',
      planTypeArr: [],
      editForm: {
        id: null,
        taskConfigId: [],
        responsibleUserId: null,
        carbonCopyUserIds: [],
        content: '',
        taskDate: '',
        taskStartTime: '',
        taskEndTime: '',
      },
      manOptions: [],
      taskOptions: [],
    }
  },

  mounted() {
    this.getEnableUserListApi()
    this.getTaskConfigListApi()
    let params = this.$route.params
    if (params.id === undefined) {
      this.title = '新增'
    } else {
      this.title = '编辑'

      this.editForm = params
      this.editForm.carbonCopyUserIds = []
      params.carbonCopyUsers.forEach((el) => {
        this.editForm.carbonCopyUserIds.push(el.id)
      })
      this.editForm.taskStartTime =
        this.editForm.taskDate + ' ' + this.editForm.taskStartTime
      this.editForm.taskEndTime =
        this.editForm.taskDate + ' ' + this.editForm.taskEndTime
      this.editForm.responsibleUserId = params.responsibleUser.id
    }
  },

  methods: {
    saveHandler() {
      if (this.title === '新增') {
        this.addTaskInfoApi(this.editForm)
      } else {
        this.editTaskInfoApi(this.editForm)
      }
    },

    relaySchemaChange(v) {
      console.log('v::: ', v)
    },

    getEnableUserListApi() {
      getEnableUserList().then((res) => {
        if (res.code == 200) {
          this.manOptions = res.data
        }
      })
    },

    getTaskConfigListApi() {
      getTaskConfigList().then((res) => {
        if (res.code == 200) {
          this.taskOptions = res.data
        }
      })
    },

    addTaskInfoApi(params) {
      addTaskInfo(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('保存成功')
          this.$router.push('/taskList')
        } else {
          this.$message.error(res.message)
        }
      })
    },

    editTaskInfoApi(params) {
      editTaskInfo(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('编辑成功')
          this.$router.push('/taskList')
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
:deep(.el-form-item__label-wrap) {
  margin-left: 0px !important;
}
</style>
